<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div id ="wrapper">
        <header>
            <div id="page-banner">
                <h1 class="title">阅读清单</h1>
                <p>清单里收纳着全部未来的相遇</p>
                <form id="search-books">
                    <input type="text" placeholder="搜索书籍..." />
                </form>
            </div>
        </header>
        
<form id="add-book">
    <input type="checkbox" id="hide" />
    <label for="hide">隐藏所有书籍</label>
    <input type="text" placeholder="添加书籍..." />
    <button>添加</button>
</form>

    <div class="block" id="book-list"></div>
        <form class="block" id="add-book"></form>
       
<footer>
    <ul class="tab-buttons">
        <li data-target="#about" class="active">关于清单</li>
        <li data-target="#contact">联系我们</li>
    </ul>
    <div class="tab-content active" id="about">
        <p>阅读清单是一款帮助你管理阅读计划的工具。</p>
        <p>
            在这里，你可以记录想要阅读的书籍，追踪阅读进度，还能通过搜索快速找到清单中的书籍。无论是经典名著还是热门新书，都可以轻松添加到你的专属阅读清单中，让阅读计划更有条理。
        </p>
    </div>
    <div class="tab-content" id="contact">
        <p>如果你有任何建议或问题，欢迎联系我们：</p>
        <p>
            邮箱：contact@readinglist.com<br />
            微信：ReadingListService<br />
            工作时间：周一至周五 9:00-18:00
        </p>
    </div>
</footer>
        
    </div>
    <script src="./app.js"></script>
</body>
</html>